<template>
  <div class="card-box fl-1">
    <div class="fl-r-e between">
      <div
        v-for="(item , i) in arr"
        :key="i"
        class="item"
        :style="{height:item + 'px'}"
        :class="{ bg : i == active , bg2: i == minActive}"
      >
        {{ item }}
      </div>
    </div>

    <LeeButton
      class="mt-20"
      @click="SelectionSort"
    >
      排序
    </LeeButton>
  </div>
</template>

<script lang="ts" >
import { defineComponent, reactive, toRefs  } from 'vue';
import router from '@/router';
export default defineComponent({
  name: 'HomeIndex',
  setup() {

    const data = reactive({
      name: '1',
      dialogVisible: false,
      arr: [],
      active: 0,
      minActive: 0,
    });
    for (let index = 0; index < 20; index++) {
      data.arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1);
    }
    console.log(data.arr);

    const handleGo = (): void => {
      router.push('/home/edit');
    };

    async function SelectionSort() {
      const len = data.arr.length;
      let minIndex, temp;
      await waitPromise();
      for (let i = 0; i < len - 1; i++) {
        minIndex = i;
        data.minActive = i;
        data.active = i;
        for (let j = i + 1; j < len; j++) {
          await waitPromise();
          data.active = j;

          if (data.arr[j] < data.arr[minIndex]) {
            minIndex = j;
            data.minActive = j;
          }
        }
        await waitPromise();
        temp = data.arr[i];
        data.arr[i] = data.arr[minIndex];
        data.arr[minIndex] = temp;
      }

      function waitPromise() {
        return new Promise((resolv) => {
          setTimeout(() => {
            resolv();
          }, 400);
        });
      }
      console.log(data.arr);
    }

    return {
      ...toRefs(data),
      handleGo,
      SelectionSort,
    };
  },
});
</script>

<style lang="scss" scoped>
.item {
  color: #fff;
  background: #304156;
  padding: 10px;
}
.bg {
  background: red !important;
}
.bg2 {
  background: gray;
}
</style>